<template>
  <header class="header">
    <div class="container">
      <div class="container-top">
        <a class="logo" href="https://openanolis.cn/" target="_blank">
          <img src="@/assets/img/logo/logo.png" />
        </a>
      </div>

      <div class="menu">
        <RouterLink class="menu-item" to="/">首页</RouterLink>
        <RouterLink class="menu-item" to="/exercise">演练系统</RouterLink>
        <RouterLink class="menu-item" to="/demo">产品demo系统</RouterLink>
        <RouterLink class="menu-item" to="/about">联盟介绍</RouterLink>
        <RouterLink class="menu-item" to="/document">运维文档</RouterLink>
        <RouterLink class="menu-item" to="/activity">通告</RouterLink>
      </div>
    </div>
  </header>
</template>

<style lang="scss" scoped>
.header {
  height: 128px;
  box-shadow: 2px 2px 4px 0px rgba(213,232,248,0.5);

  .container {
    margin: 0 auto;
    width: 1180px;
    height: 100%;
  }

  .container-top {
    padding: 18px 0;
    height: 84px;
  }

  .logo {
    display: block;
    width: 140px;
    height: 100%;
    overflow: hidden;
    img {
      margin-left: -48px;
      height: 100%;
    }
  }

  .menu {
    height: 44px;
    display: flex;

    .menu-item {
      padding: 8px 6px;
      height: 100%;
      border-bottom: 4px solid transparent;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      line-height: 24px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
      transition: all 0.3s;

      & + .menu-item {
        margin-left: 50px;
      }

      &.router-link-active {
        border-color: #0F75E8;
        font-family: PingFangSC-Medium;
        color: #0F75E8;
        font-weight: 500;
      }

      &:hover {
        border-color: #0F75E8;
        color: #0F75E8;
      }
    }
  }
}
</style>
